<template>
  <div class="tabs">
    <button v-for="tab in tabs" :value="tab.value" class="tab" :class="{'active':indexValue===tab.value}"
            @click="handleTabChange(tab.value)">{{tab.title}}
    </button>
    <transition name="slider">
      <span class="active-line" v-if="indexValue" :style="activeLineStyle"></span>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapGetters} from 'vuex'

  export default {
    data() {
      return {
        activeLineStyle: {}
      }
    },
    props: {
      tabs: {
        type: Array,
        default: []
      }
    },
    created() {
      this._activeLineStyle()
    },
    computed: {
      ...mapGetters([
        'indexValue'
      ])
    },
    methods: {
      handleTabChange(val) {
        this.$emit('tabChange', val)
        this._activeLineStyle()
      },
      _activeLineStyle() {
        this.activeLineStyle = {
          'width': `${100 / this.tabs.length}%`,
          'transform': `translate3d(${this._getIndex()}, 0px, 0px)`
        }
      },
      _getIndex() {
        let values = []
        this.tabs.forEach(function (item) {
          values.push(item.value)
        })
        return `${values.indexOf(this.indexValue) * 100}%`
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  .tabs {
    .tab {
      flex: 1;
      padding: 0;
      margin: 0;
      border: 0;
      background-color: transparent;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 35px;
      cursor: pointer;
      color: $color-text-ll;
      font-size: $font-size-medium;
      &:hover, &.active {
        color: $color-text-w;
      }
    }
    .active-line {
      position: absolute;
      display: inline-block;
      width: 16.6667%;
      height: 2px;
      left: 0;
      bottom: 2px;
      background-color: $color-active;
      border-radius: 50px;
      transition: all .5s;
    }
  }
</style>
